<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class='container'>试题录入</div>
      <hr>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学科" prop="subjectID">
          <el-select v-model="ruleForm.subjectID" @change="monitor" placeholder="请选择">
            <el-option v-for="item,index in subjects" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录" prop="catalogID">
          <el-select v-model="ruleForm.catalogID" placeholder="请选择">
            <el-option v-for="item,index in directorys" :label="item.label" :key="index" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterpriseID">
          <el-select v-model="ruleForm.enterpriseID" placeholder="请选择">
            <el-option v-for="item in enterprise" :key="item.id" :label="item.company" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="城市" prop="city">
          <el-select v-model="ruleForm.province" placeholder="请选择">
            <el-option v-for="item in provinces" :key="item.city" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="ruleForm.city" placeholder="请选择">
            <el-option v-for="item in citys" :key="item.area" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="ruleForm.direction" placeholder="请选择">
            <el-option v-for="item,index in direction" :key="index" :label="item" :value="item"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="题型" prop="questionType">
          <el-radio-group v-model="ruleForm.questionType">
            <el-radio label="1">单选</el-radio>
            <el-radio label="2">多选</el-radio>
            <el-radio label="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-radio-group v-model="ruleForm.difficulty">
            <el-radio label="1">简单</el-radio>
            <el-radio label="2">困难</el-radio>
            <el-radio label="3">一般</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干" prop="question">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="ruleForm.question"></quill-editor>
        </el-form-item>
        <el-form-item v-if="ruleForm.questionType !=='3'" label="选项:">
          <div v-for="obj,index in ruleForm.options" :key="obj.index" class="qwe">
            <div class="wer">

              <el-radio v-if="ruleForm.questionType === '1'" class="elmmentRadio" v-model="questionType" :label="index">{{ obj.code + ':' }}</el-radio>

              <el-checkbox v-else v-model="obj.isRight" :label="obj.code + ':'" />

              <el-input class="elmmentInput" v-model="obj.title"></el-input>
            </div>

            <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon">上传图片</i>
            </el-upload>
          </div>

        </el-form-item>
        <el-button :disabled="ruleForm.questionType === '1'" type="danger" plain @click="addQuestionType">+增加选项与答案</el-button>
        <el-form-item label="解析视频:" prop="parsing">
          <el-input v-model="ruleForm.parsing" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="answer">
          <!-- 使用 v-model 进行双向的数据绑定 -->
          <quill-editor v-model="ruleForm.answer"></quill-editor>
        </el-form-item>
        <el-form-item label="题目备注:" prop="selection">
          <el-input v-model="ruleForm.selection" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="试题标签" prop="tags">
          <el-select v-model="Akrtags" placeholder="请选择" @change="Krrtags" multiple>
            <el-option v-for="item in tags" :key="item.id" :label="item.tagName" :value="item.tagName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" class="submit" @click="handelSubmit">确认提交</el-button>
        </el-form-item>

      </el-form>
    </div>
  </div>

</template>

<script>

// 学科列表
import { simple } from '@/api/hmmm/subjects'
// 目录简单列表
import { directoryAPI } from '@/api/hmmm/directorys'
// 标签列表 重命名
import { list as tagssimple } from '@/api/hmmm/tags'
import { provinces, citys } from '@/api/hmmm/citys'
// 企业列表
import { list as companyslist } from '@/api/hmmm/companys'
// 方向
import { direction } from '../../api/hmmm/constants'
import { add as addsubmit } from '@/api/hmmm/questions'
export default {
  name: 'questions-new',

  data () {
    return {
      // 试题标签
      Akrtags: [],
      // 获取的学科数组
      subjects: [],
      //  目录列表
      directorys: [],
      // 标签列表
      tags: [],
      // 企业列表
      enterprise: [],
      // 方向
      direction: direction,
      imageUrl: '', // 图片的！！！
      questionType: -1, // 单选按钮
      // 表单
      ruleForm: {

        subjectID: '', // 学科
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        tags: '', // 标签
        page: 1,
        pagesize: 10,
        province: '', // 城市
        city: '', // 城区
        direction: '', // 方向
        topics: '', // 题干
        questionType: '1', // 题型
        difficulty: '1', // 难度
        answer: '', // 答案解析
        parsing: '', // 解析
        selection: '', // 题目备注
        question: '', // 试题
        // imageUrl: '' // 上传
        input: '', // 输入框
        options: [{
          code: 'A', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'B', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'C', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }, {
          code: 'D', // 代码
          title: '', // 标题
          img: '', // 图片URL
          isRight: false // 是否正确答案
        }]
      },
      //  备用选项
      xuanxiang: ['E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

      // 富文本编辑器

      // 富文本编辑器

      rules: {
        subjectID: [
          { required: true, message: '请输入学科名称', trigger: 'blur' }
        ],
        catalogID: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ],
        enterpriseID: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        city: [
          { required: true, message: '请输入城市', trigger: 'blur' }
        ],
        direction: [
          { required: true, message: '请输入方向', trigger: 'blur' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ],
        topics: [
          { required: true, message: '请填写题干', trigger: 'blur' }
        ],
        options: [
          { required: true, message: '请选择选项', trigger: 'blur' }
        ],
        parsing: [
          { required: true, message: '请填写解析', trigger: 'blur' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'blur' }
        ],
        selection: [
          { required: true, message: '请填写题目备注', trigger: 'blur' }
        ],
        question: [
          { required: true, message: '请选择试题标签', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed: {
    provinces () {
      return provinces()
    },
    citys () {
      return citys(this.ruleForm.province)
    }
  },
  created () {
    // 获取的学科列表
    this.subject()
    this.enterprises()
    // this.directory()
  },
  // 侦听器 监听
  watch: {
    'ruleForm.subjectID': {
      immediate: true, // 立即执行
      deep: true, // 深度监听
      async handler (val) {
        if (val) {
          const ret = await directoryAPI({
            subjectID: val
          })
          // console.log(ret)
          this.directorys = ret.data
        }
      }
    },
    'ruleForm.questionType': {
      immediate: true, // 立即执行
      deep: true, // 深度监听
      handler (val) {
        this.ruleForm.options.map((item, ind) => {
          item.isRight = false
        })
      }
    },
    // 单选按钮携带index，检查并修改true
    questionType (index) {
      this.ruleForm.optionss.map((item, ind) => {
        if (index === ind) {
          item.isRight = true
        } else {
          item.isRight = false
        }
      })
    }
  },
  methods: {
    // 监听tags 转换字符串
    Krrtags () {
      const ret = this.Akrtags.join()
      console.log(ret)
      this.ruleForm.tags = ret
    },
    // 提交表单
    handelSubmit () {
      console.log(this.ruleForm)
      this.$refs.ruleForm.validate(async (value) => {
        if (value) {
          const ret = await addsubmit(this.ruleForm)
          if (ret.status === 200) {
            this.$message.success('提交成功')
            this.$router.push('/questions/list')
            console.log(ret)
            // 表单重置
            this.$refs.ruleForm.resetFields()
          } else {
            this.$message.error('提交失败')
          }
        } else {
          this.$message.error('提交失败')
          return false
        }
      })
    },
    // 增加选项事件
    addQuestionType () {
      if (this.xuanxiang.length === 0) return this.$message.error('无更多选项了')
      this.ruleForm.optionss.push({
        code: this.xuanxiang[0], // 代码
        title: '', // 标题
        img: '', // 图片URL
        isRight: false // 是否正确答案
      })
      this.xuanxiang.shift()
    },
    //  图片的方法
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    // 验证图片的格式 file参数
    beforeAvatarUpload (file) {
      // 1. 验证文件的类型
      const types = ['image/png', 'image/jpeg', 'image/gif']
      if (!types.includes(file.type)) {
        // 选中的文件不是这三种之一
        this.$message.warning('文件格式错误')
        return false
      }
      // 2. 验证文件的大小
      if (file.size / 1024 / 1024 > 1) {
        // 图片超出了1M
        this.$message.warning('图片不可以超出1M')
        return false
      }

      return true
    },
    // 获取学科列表
    async subject () {
      const { data } = await simple()
      // console.log(data)
      this.subjects = data
    },
    // 企业列表
    async enterprises () {
      const { data: { items } } = await companyslist()
      this.enterprise = items
    },
    // change事件
    async monitor () {
      // 目录
      const ret = await directoryAPI()
      this.directorys = ret.data
      // 标签
      const ret1 = await tagssimple(this.ruleForm)
      // console.log(ret1)
      this.tags = ret1.data.items
    },

    // 兜底验证
    initsubject (ruleForm) {
      this.$refs.ruleForm.validate((value) => {
        if (value) {
          // console.log('value')
          // await initsubject(this.ruleForm)
        } else {
          return false
        }
      })
    }

  }
}

</script>

<style scoped lang='scss'>
// 表单样式
.elmmentInput {
  width: 300px;
  height: 20px;
}

// 上传图片
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  margin-bottom: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  font-size: 10px;
  color: #8c939d;
  width: 110px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.optionsNa {
  display: flex;
  height: 80px;

  .avatar-uploader-icon {
    padding: 10px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 20px;
    color: #8c939d;
    width: 110px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
}
.el-radio {
  padding: 12px;
}
.avatar-uploader {
  padding-left: 15px;
}
.dashboard-container {
  padding: 20px;
  // 顶部间距
  .demo-ruleForm {
    margin: 20px;
  }
  .app-container {
    background-color: #fff;
    .jia {
      margin: 0 0 20px 100px;
    }
  }
  .submit {
    margin: 20px;
  }
}
.qwe {
  display: flex;

  .wer {
    margin-top: 10px;
  }
}
</style>
